/**
 * 修改 拍照测肤 专家建议
 * @author Zeon scplay@gmail.com
 * @date 2019/3/20
 * @copyright Created by Panxsoft.
 */
<style lang='less' rel="stylesheet/less" type="text/less">
  .v-customer-expert-suggest-create {
    overflow-y: scroll;
    min-height: 600px;
    // width: 100%;
    .ivu-form-item {
      margin-bottom: 25px;
    }

    .suggest-card {
      margin-bottom: 1rem;
    }

    /* 不显示的 tab pane 高度设置成 0，防止多个 tab pane 高度互相影响*/
    .height_zero {
      height: 0;
    }
   .ivu-form-item-content{
    //  width: 150px;
   }
   .controBtn .ivu-form-item-content{
     width: 180px !important;
     margin-left: 0 !important;
     margin-bottom: -32px;
   }
  }
</style>
<template>
	<div class="v-customer-expert-suggest-create"
       :style="{'max-height':formMaxHeight(true)}"
  >
		<Row
			type="flex"
      justify="start">
      <i-col span="23" push="1">
        <Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="110"
					name="create-form">

          <!-- Submit -->
          <Row>
            <Col span="2" push="16">
              <Form-item class="controBtn">
                <Button
                  type="primary"
                  @click="handleSubmit('formValidate')">
                  {{ $t('common.update') }}
                </Button>
                 <Button
                  type="warning"
                  @click="handleReset('formValidate')">
                  {{ $t('common.reset') }}
                </Button>
              </Form-item>
            </Col>
          </Row>

          <!-- 多语言 专家建议表单 -->
          <Row>
            <Col span="18" push="1">
              <Tabs
                v-model="current_tab_idx"
              >
                <TabPane
                  v-for="(locale_suggest, locale_idx) in formValidate.wax_skin_data"
                  :key="`wax_tab_lang[${locale_suggest.language_id}]`"
                  :label="locale_suggest.language_name"
                  :class="{ height_zero: current_tab_idx !== Number(locale_idx)}"
                >
                  <Row>
                    <Col span="6">
                      <!-- 选择检测项 -->
                      <Form-item
                        :label="$t('expert_suggest.wax_item')"
                        prop="itemsid">
                        <Select
                          v-model="locale_suggest.current_item_idx"
                          :placeholder="$t('common.please_select',{'field':$t('expert_suggest.wax_item')})"
                          filterable
                          transfer>
                          <Option
                            v-for="(item, item_idx) in formValidate.wax_skin_data[locale_idx].suggest_by_language"
                            :value="item_idx"
                            :key="`item_id_select[${locale_idx}][${item.item_id}]`">{{ item.item_name}}</Option>
                        </Select>
                      </Form-item>
                    </Col>
                  </Row>

                  <Row
                    class="suggest-card"
                    v-for="(item, item_idx) in formValidate.wax_skin_data[locale_idx].suggest_by_language[formValidate.wax_skin_data[locale_idx].current_item_idx].suggest_by_item_id"
                    :key="`itemsid[${locale_idx}][${item_idx}]`"
                  >
                    <Col span="24">
                      <Card>
                        <p slot="title">
                          {{ item.level_name }}
                        </p>
                        <!-- 成因分析 -->
                        <Row>
                          <Col span="10">
                            <Form-item
                              :label="$t('expert_suggest.wax_intro')"
                              prop="name">
                              <i-input
                                v-model="item.level_intro"
                                :placeholder="$t('common.placeholder',{'field':$t('expert_suggest.wax_intro')})"
                                name="wax-intro"
                                :autosize="{minRows: 4}"
                                type="textarea"/>
                            </Form-item>
                          </Col>
                          <!-- 专家建议 -->
                          <Col span="10" offset="2">
                            <Form-item
                              :label="$t('expert_suggest.wax_suggest')"
                              prop="name">
                              <i-input
                                v-model="item.level_experts"
                                :placeholder="$t('common.placeholder',{'field':$t('expert_suggest.wax_suggest')})"
                                name="wax-suggest"
                                :autosize="{minRows: 4}"
                                type="textarea"/>
                            </Form-item>
                          </Col>
                        </Row>
                      </Card>
                    </Col>
                  </Row>
                </TabPane>
              </Tabs>
            </Col>
          </Row>

				</Form>
      </i-col>
    </Row>
	</div>
</template>

<script>

import Uploader from 'src/views/component/Uploader';
import { validateImage } from 'src/validate'; // 引入校验文件
import { computedFormMaxHeight } from 'src/views/mixins/computedFormMaxHeight';

export default {
	name: 'ExpertSuggestEditWax',
  mixins: [computedFormMaxHeight],
  components: {
		Uploader,
	},
	props: {
    waxSkinData: {
      type: Array,
      required: true,
    }
	},
  mounted() {
    this.formValidate.wax_skin_data = this.waxSkinData;
  },
	data() {
		return {
      current_tab_idx: 0, // 当前选中 tab index

			formValidate: { // 表单数据
        wax_skin_data: []
			},

			ruleValidate: { // 表单验证规则

			},
		};
	},
	methods: {
		/**
     * 提交表单
     * @param  {string} name {表单上对应的ref值}
     * @return {undefined}
     */
		handleSubmit(name) {
			// this.$refs[name].validate((valid) => {
			// 	if (valid) {                                                                                                                                                                                                                        ();
				// } else {
				// 	this.$Message.error(this.$t('common.exist_empty_field'));
				// }
      // });
      this.formDataCreate()
		},
/**
 *重置表单
 * 
 */
   handleReset(name){
    this.formDataReset()
   },
 

		/**
     * 手动拼接表单数据
     * @return {Object} {拼接好的表单数据}
     */
		formDataCreate() {
			let postObject = {};

			this.formValidate.wax_skin_data.forEach(locale_suggest => {
        locale_suggest.suggest_by_language.forEach(item_suggest => {
          item_suggest.suggest_by_item_id.forEach(suggest => {
            const level_sort = suggest.customer_relate_wax_skin.level_sort;

            const key_nest_idx = `wax_skin_suggests[${locale_suggest.language_id}][${item_suggest.item_id}][${level_sort}]`;

            postObject[`${key_nest_idx}[level_name]`] = suggest.level_name;
            postObject[`${key_nest_idx}[level_intro]`] = suggest.level_intro;
            postObject[`${key_nest_idx}[level_experts]`] = suggest.level_experts;
            postObject[`${key_nest_idx}[level_personal]`] = suggest.level_personal;
            postObject[`${key_nest_idx}[level_suggest]`] = suggest.level_suggest;
          })
        })
      })

      const form_data = new FormData();

			Object.keys(postObject).forEach((key) => {
				form_data.append(key, postObject[key]);
			});

			this.$emit('post-wax', form_data);
    },
    
     formDataReset() {
			this.$emit('del-wax');
    }
	},
};

</script>